<template>
  <div class="Son">
    御剑乘风来,除魔天地间!====Son.vue ===
    {{ num1 }}=== {{ str }}=== {{ flag }}===
    <br />
    {{ shuzi }}
    <br />
    <button @click="event">点击我传值</button>
    <button @click="changeFather">点击我修改父组件传递的数据===源头修改</button>
    <button @click="change">子组件直接修改父组件,内部修改</button>
  </div>
</template>
<script>
export default {
  name: '',
  /*固定写法,接收父组件数据使用props属性,可以使用数组[]或者{}接收
   接收完成后,相当于是自己data里的数据,可以正常使用
*/
  //接收的名字要和传递的name值一致
  // props: ['num1', 'str'],
  /* 对象写法 */
  // props: {
  //   num1: String,
  //   str: String
  // },
  props: {
    num1: {
      type: Number, //定义父组件传值类型
      required: true //规定父组件必须传值
    },
    str: {
      type: String,
      default: 'hello wold' //如果不传,给一个默认值
    },
    shuzi: {
      type: String,
    },

    flag: Boolean

  },

  data () {
    return {
      SonMsg: '我是来自子组件的消息',
    }
  },
  methods: {
    //子组件把数据传给父组件
    event () {
      this.$emit('SonEvent', this.SonMsg)
    },
    //源头修改父组件的数据
    /*
1.注意父组件传递过来的数据只能读,子组件无法修改
  父组件的内容只能在父组件修改
2.如果想要修改,可以把父组件的数据使用this.$emit()传递回去
this.$emit('事件名', '新的内容')
*/
    changeFather () {
      console.log(this.str);
      this.$emit('changeFa', '来自父组件的数据---Son修改了 ')
    },

    /* 子组件直接更改父组件传过来的数据
       子组件：this.$emit('update:c传过来的属性[n]',更改的值)
       父组件：需要使用修饰符  sync   :n.sync='123'
       */
    change () {
      this.$emit('update:shuzi', '654321')
    }

  }
}
</script>
<style lang='less'  scoped>
.Son {
  color: purple;
}
</style>
